<template>
  <div>
    <div class="uploadBox ml20">
      <!--<el-button @click="preview"
                 class="btnDefault mr10"
                 v-if="type==='button'">预览</el-button>-->
      <img src="../../assets/images/watch.png" alt=""  v-if="type==='button'&&currentImg" @click="preview" class="mr20">
      <el-upload ref="upload"
                 :limit="1"
                 class="avatar-uploader"
                 :show-file-list="false"
                 :action="uploadInfo.url"
                 :data="{sysId:'SYS_51117169316bd0e8aefcf9232d69e539'}"
                 name="files"
                 :before-upload="beforeUpload"
                 :on-success="uploadSuccess"
                 :on-error="uploadError">
        <div class="detailImg"
             :style="{width:(type==='img'?widthImg:'auto'),height:(type==='img'?heightImg:'auto')}">
         <!-- <el-button v-if="type==='button'" class="btnDefault"
                     type="primary"
                     >上传</el-button>-->
          <img src="../../assets/images/upload.png" alt="" v-if="type==='button'" >
          <div class="boxBorder"
               :style="{width:widthImg,height:heightImg}"
               v-if="type==='img'&&!currentImg">
            <i class="el-icon-plus"></i>
          </div>
          <img v-if="type==='img'&&currentImg"
               class=""
               :src="currentImg"
               :style="{width:widthImg,height:heightImg,borderRadius:round?'50%':'4px'}" />
          <!--<div class="shadow"-->
               <!--v-if="currentImg">-->
            <!--<i class="el-icon-delete danger iconSpan  cursor font14"-->
               <!--@click.stop="clearImg(index)"></i>-->
            <!--<i class="el-icon-search iconSpan  cursor font14"-->
               <!--@click.stop="preview"-->
               <!--style="margin-top:8px"-->
               <!--v-if="type==='img'&&currentImg"></i>-->
            <!--&lt;!&ndash;<el-button @click.stop="currentImg=''"><i class="el-icon-delete"></i></el-button>&ndash;&gt;-->
          <!--</div>-->
        </div>
      </el-upload>
    </div>

    <transition enter-active-class="zoomIn"
                leave-active-class="zoomOut"
                v-if="currentImgShow">
      <div class="imgModal"
           @click="cancelPreview">
        <img :src="currentImg"
             alt="">
      </div>
    </transition>
  </div>

</template>

<script>
  // import "animate.css"
  import axios from 'axios'
  export default {
    props: {
      uploadInfo: {
        type: Object,
        default () {
          return {
            url: '',
            width: '',
            height: '',
            uploadData:{
              sysId:'SYS_51117169316bd0e8aefcf9232d69e539'
            }
          }
        }
      },
      type: {
        type: String,
        default: 'button'
      },
      currentImg: {//点击图片上传、默认图片
        type: String,
        default: ''
      },
      widthImg: {
        type: String,
        default: '78px'
      },
      heightImg: {
        type: String,
        default: '78px'
      },
      round: {
        type: Boolean,
        default: false
      },
      index:{
        type:Number,
        default:-1
      }
    },
    data () {
      return {
        currentImgShow: false,
        header: {},

      }
    },
    computed: {

    },
    mounted () {
      this.header.token = sessionStorage.getItem('token')
      this.uploadInfo.url=JSON.parse(localStorage.getItem('baseJson')).uploadUrl+'/file-rest/api/businessSystem/uploadFile'
    },
    methods: {
      clearImg(){
        if(this.index===-1){
          // this.currentImg=''
          this.$emit('uploadSuccess', '')
        }else{
          this.$emit('delImgFromList',this.index)
        }
      },
      //上传图片
      beforeUpload (file) {//上传之前
        this.$emit('beforeUpload', true)
        const isJPG = file.type === 'image/jpeg';
        const isGIF = file.type === 'image/gif';
        const isPNG = file.type === 'image/png';
        const isBMP = file.type === 'image/bmp';
        const is1M = file.size / 1024 / 1024 < 1
        if (!isJPG && !isGIF && !isPNG && !isBMP) {
          this.$emit('beforeUpload', false);
          this.$message({
            message: '上传文件格式错误！',
            type: "warning"
          })
        } else if (!is1M) {
          this.$emit('beforeUpload', false);
          this.$message({
            message: '上传图片大小不能超过1M！',
            type: "warning"
          })
        }
        if((isJPG || isGIF || isPNG || isBMP) && is1M){
          this.$store.state.loadingFlag=true
        }
        return (isJPG || isGIF || isPNG || isBMP) && is1M
      },
      uploadSuccess (res, file, fileList) {
        this.$store.state.loadingFlag=false
        if (res.success) {
          // this.currentImg = res.data
          this.$message({
            message: res.message,
            type: "success"
          })
          this.$refs.upload.clearFiles()
          this.$emit('uploadSuccess', res.data[0])
        } else {
          this.$message({
            message: res.message,
            type: "warning"
          })
          this.$emit('uploadError', false)
        }
      },
      // 上传错误
      uploadError (res, file, fileList) {
        this.$refs.upload.clearFiles()
        this.$emit('uploadError', false)
      },
      preview () {
        this.currentImgShow = true
      },
      cancelPreview () {
        this.currentImgShow = false
      }
    },

    components: {},
  }
</script>


<style scoped lang="less">
  .avatar-uploader {
    display: flex;
    justify-content: center;
    .avatar {
      width: 78px;
      height: 78px;
      border-radius: 50%;
    }
  }
  .uploadBox {
    display: flex;
    justify-content: flex-start;
    align-items: center !important;
  }
  .boxBorder {
    border: 1px dashed #c0c4cc;
    border-radius: 4px;
    display: flex;
    justify-content: center !important;
    align-items: center !important;
  }
  .imgModal {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999999;
    background: rgba(0, 0, 0, 0.3);
    img {
      max-width: 80%;
      max-height: 80%;
    }
  }
  .detailImg {
    position: relative;
    img {
      border-radius: 3px;
    }
  }
  .shadow {
    display: none;
  }
  .detailImg:hover .shadow {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    background-color: rgba(24, 24, 24, 0.5);
    text-align: center;
    border-radius: 4px;
    flex-direction: column;
    .el-button {
      background-color: rgba(183, 191, 182, 0.5);
      color: #fff;
      padding: 0px 2px;
    }
    .iconSpan {
      display: inline-block;
      padding: 4px 4px;
      border-radius: 50%;
      background: #fff;
      cursor: pointer;
    }
  }
</style>
